<template>
  <view class="scenic-tickets-page">
    <!-- 主内容区域 -->
    <view class="main-content">
      <!-- 媒体展示区域 -->
      <view class="media-container">
        <view class="media-wrapper">
          <!-- 统一使用 v-if 控制显示，避免与手动样式冲突 -->
          <image class="scenic-image"
            :src="data.img" mode="aspectFill"
            v-if="currentTab === 'image'"></image>
          <video class="scenic-video" ref="videoRef"
            :src="data.video" controls
            :autoplay="!isMuted" loop v-if="currentTab === 'video'" :muted="isMuted" @loadedmetadata="onVideoLoaded">
          </video>
        </view>

        <!-- 顶部导航 -->
        <view class="top-navigation">
          <view class="back-button" @click="goBack">
            <image :src="imageBaseUrl + '/img/backtrack.png'" mode="aspectFit"></image>
          </view>
          <view class="top">
            <view class="action-button">
              <image :src="imageBaseUrl + '/img/satellite.png'" mode="aspectFit"></image>
            </view>
            <view class="action-button">
              <image :src="imageBaseUrl + '/img/hearts.png'" mode="aspectFit"></image>
            </view>
            <view class="action-button">
              <image :src="imageBaseUrl + '/img/more.png'" mode="aspectFit"></image>
            </view>
          </view>
        </view>

        <!-- 底部控制栏 -->
        <view class="bottom-controls">
          <view class="media-toggle">
            <div class="switch" @click="switchMedia">
              <!-- 视频/图片选项，保留原有class -->
              <div class="switch-option" :class="{ 'switch-active': currentTab === 'video' }">视频</div>
              <div class="switch-option" :class="{ 'switch-active': currentTab === 'image' }">图片</div>
              <!-- 新增滑动块，通过动态样式控制位置 -->
              <div class="switch-slider" :style="{ transform: `translateX(${(currentTab === 'video' ? 0 : 40)}px)` }">
              </div>
            </div>
          </view>
          <view class="photo-album" @click="photoalbum">
            <text>相册</text>
            <image :src="imageBaseUrl + '/img/advance.png'" mode="aspectFit"></image>
          </view>
          <view class="music-toggle" @click="toggleMute">
            <image :src="isMuted ? imageBaseUrl + '/img/mute.png' : imageBaseUrl + '/img/voice.png'"
              mode="aspectFit"></image>
          </view>
        </view>
      </view>
      <!-- 门票区域 -->
      <view class="ticket-container">
        <view class="ticket-header">
          <text class="ticket-title">门票</text>
        </view>
        <view class="ticket-tabs">
          <view class="ticket-tab" :class="{ 'ticket-tab-active': activeTab === '大学生' }" @click="activeTab = '大学生'">大学生
          </view>
          <view class="ticket-tab" :class="{ 'ticket-tab-active': activeTab === '儿童票' }" @click="activeTab = '儿童票'">儿童票
          </view>
          <view class="ticket-tab" :class="{ 'ticket-tab-active': activeTab === '成人票' }" @click="activeTab = '成人票'">成人票
          </view>
        </view>
      </view>
      <!-- 门票列表 -->
      <view class="ticket-header1">
        <text class="ticket-title1">门票</text>
      </view>
      <view class="ticket-list">
        <view class="ticket-item" v-for="(item, index) in data" :key="index" v-show="item.name === activeTab">
          <view class="ticket-info">
            <text class="ticket-name">{{ item.name }}</text>
            <text class="original-price">{{ item.children[0].original_price }}</text>
          </view>
          <view class="ticket-availability">
            <text class="available-tag">可订明日</text>
            <text class="current-price"><text>{{ item.children[0].current_price }}</text>起</text>
          </view>
          <view class="ticket-policy">
            <text class="policy-tag">随时退，无需退票</text>
            <text class="discount-tag">优惠￥{{ item.children[0].original_price - item.children[0].current_price }}</text>
          </view>
          <view class="ticket-actions">
            <view class="buy-notice" @click="showPolicy">
              <text>购买须知</text>
              <image :src="imageBaseUrl + '/img/right.png'" mode="aspectFit"></image>
            </view>
            <view class="book-button" @click="book(item.children)">
              <text>预定</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <div class="curtain" v-if="isShow" @click="showPolicy"></div>
    <view class="ticket-details" v-if="isShow">
      <view class="ticket-details-title">购买须知</view>
      <div class="ticket-details-content" v-html="processedHtml"></div>
      <button class="registers" @click="showPolicy">关闭</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import api from '../../api/ticket/index.js';
import config from '../../config/index.js';
const imageBaseUrl = config.image;//图片地址
const data = ref([]); // 初始化为空数组
// 统一使用 currentTab 控制当前显示类型（'video'/'image'）
const currentTab = ref('video'); // 初始显示视频
const sliderX = ref(0); // 滑动块初始位置（0: 视频下方，40: 图片下方）
const isShow = ref(false);//  是否显示
// 新增门票tabs高亮状态
const activeTab = ref('大学生'); // 初始选中大学生票
const processedHtml = ref('');// 富文本处理后的html
const videoRef = ref(null); // 视频元素ref
const isMuted = ref(false); // 默认静音，符合浏览器自动播放策略

onMounted(() => {
  //  获取景区数据
  api.details({
    scenic_id: 3
  }).then(res => {
    data.value = res.data || [];
    if (data.value.length > 0 && data.value[0].children && data.value[0].children[0]) {
      processedHtml.value = data.value[0].children[0].deatils.replace(/&nbsp;/g, ' ');//富文本处理  
    }
    // 数据加载完成后，确保视频状态正确
    nextTick(() => {
      if (currentTab.value === 'video' && videoRef.value) {
        videoRef.value.muted = isMuted.value;
      }                                                                       
    });
  }).catch(err => {
    // 错误处理
  });
});
//提交
const book = (item) => {
    console.log(item[0]);
    //存储目标订单数据
    uni.setStorageSync('target', item[0]);
    uni.navigateTo({
        url: '/pages/submit/submit'
    });
}
//主页
const goBack = () => {
  uni.navigateTo({
    url: '/pages/home/home'
  });
};
// 相册
// 跳转到相册页面
const photoalbum = () => {
  uni.navigateTo({
    url: '/pages/photoalbum/photoalbum'
  });
};
//  显示购买须知
const showPolicy = () => {
  isShow.value = !isShow.value;
}

// 视频静音控制，处理用户交互和自动播放策略
const toggleMute = async () => {
  isMuted.value = !isMuted.value;

  if (currentTab.value === 'video' && videoRef.value) {
    videoRef.value.muted = isMuted.value;

    // 非静音状态下，尝试播放视频（需要用户交互）
    if (!isMuted.value) {
      try {
        await videoRef.value.play();
      } catch (err) {
        // 提示用户手动点击播放
        isMuted.value = true; // 回退到静音状态
        uni.showToast({
          title: '请点击视频播放',
          icon: 'none'
        });
      }
    }
  }
};

// 媒体切换
const switchMedia = () => {
  // 切换前暂停当前媒体
  if (currentTab.value === 'video' && videoRef.value) {
    videoRef.value.pause();
  }

  currentTab.value = currentTab.value === 'video' ? 'image' : 'video';
  sliderX.value = currentTab.value === 'video' ? 0 : 40;

  // 切换到视频后，确保视频状态正确
  if (currentTab.value === 'video' && videoRef.value) {
    videoRef.value.muted = isMuted.value;
    if (!isMuted.value) {
      videoRef.value.play().catch(err => {
      });
    }
  }
};

// 视频元数据加载完成后回调
const onVideoLoaded = () => {
  if (videoRef.value) {
    videoRef.value.muted = isMuted.value;
    // 尝试自动播放（可能被浏览器阻止）
    if (!isMuted.value) {
      videoRef.value.play().catch(err => {
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.curtain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(134, 134, 134, 0.475);

}

.registers {
  width: 90%;
  height: 35px;
  background-color: #FF8D1A;
  border-radius: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  margin-top: 20px;
  font-size: 15px;
  position: fixed;
  bottom: 20px;
  left: 5%;
}

.ticket-details-title {
  font-size: 18px;
  width: 100%;
  padding: 10px;
  text-align: center;
}

.ticket-details-content {
  width: 90%;
  margin-left: 5%;
  margin-bottom: 80px;
}

.ticket-details {
  width: 100vw;
  height: 500px;
  border-radius: 15px 15px 0 0;
  overflow-y: auto;
  position: fixed;
  bottom: 0;
  background-color: white;
  z-index: 999;

}

.scenic-tickets-page {
  background-color: #f4f4f4;
  min-height: 100vh;
  overflow-x: hidden;
}

/* 媒体切换按钮样式优化 */
.switch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 30px;
  background-color: rgba(86, 86, 86, 0.8);
  border-radius: 20px;
  overflow: hidden;
}

.switch-option {
  position: relative;
  width: 40px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  z-index: 1;
  transition: color 0.3s ease;
}

.switch-active {
  color: #181818;
  /* 激活时文字颜色变深 */
}

.switch-slider {
  position: absolute;
  top: 2.5px;
  left: 0;
  width: 40px;
  height: 25px;
  background-color: #FFFFFF;
  border-radius: 20px;
  transition: transform 0.3s ease;
}

.divider {
  width: 100%;
  border-top: 1px solid #adacac;
}

/* 媒体容器 */
.media-container {
  width: 100%;
  height: 32vh;
  position: relative;
  background-color: #000;

  .media-wrapper {
    width: 100%;
    height: 100%;

    .scenic-image,
    .scenic-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .top-navigation {
    position: absolute;
    top: 25px;
    left: 0;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .back-button,
    .action-button {
      width: 30px;
      height: 30px;
      background-color: rgba(0, 0, 0, 0.4);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 30px;

      image {
        width: 20px;
        height: 20px;
      }
    }
  }

  .top {
    display: flex;
    justify-content: space-between;
  }

  .bottom-controls {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .media-toggle {
      width: 84px;
      height: 30px;
    }

    .photo-album,
    .music-toggle {
      height: 30px;
      background-color: rgba(86, 86, 86, 0.8);
      border-radius: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 10px;
      gap: 5px;

      text {
        color: #fff;
        font-size: 14px;
      }

      image {
        width: 20px;
        height: 20px;
      }
    }

    .music-toggle {
      width: 30px;
    }
  }
}

.ticket-header1 {
  margin-top: 10px;
  padding-left: 5%;
  background-color: white;

  .ticket-title1 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }
}

/* 门票容器 */
.ticket-container {
  padding: 15px;
  background-color: #F4F4F4;

  .ticket-header {
    margin-bottom: 10px;

    .ticket-title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }
  }

  .ticket-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    .ticket-tab {
      padding: 5px 10px;
      background-color: #fff;
      border-radius: 5px;
      font-size: 14px;
      color: #333;
      transition: all 0.3s ease;
    }

    .ticket-tab-active {
      background-color: #f00;
      /* 红色高亮背景 */
      color: #fff;
      /* 白色文字 */
      transform: scale(1.05);
      /* 轻微放大效果 */
    }
  }
}

/* 门票列表 */
.ticket-list {
  padding: 15px;
  background-color: #fff;

  .ticket-item {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;

    .ticket-info,
    .ticket-availability,
    .ticket-policy,
    .ticket-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .ticket-name {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }

    .original-price {
      font-size: 14px;
      color: #999;
      text-decoration: line-through;
    }

    .available-tag {
      font-size: 14px;
      color: #138aec;
    }

    .current-price text {
      font-size: 19px;
      color: #f00;
    }

    .policy-tag {
      font-size: 14px;
      color: #138aec;
    }

    .discount-tag {
      font-size: 12px;
      color: #f00;
      border: 1px solid #f00;
      padding: 2px 5px;
      border-radius: 3px;
    }

    .buy-notice {
      display: flex;
      align-items: center;
      gap: 5px;

      text {
        font-size: 14px;
        color: #666;
      }

      image {
        width: 15px;
        height: 15px;
      }
    }

    .book-button {
      background-color: #f00;
      color: #fff;
      padding: 5px 15px;
      border-radius: 15px;
      font-size: 14px;
    }
  }
}

/* 提示消息组件 */
.revamp,
.collect,
.likesuccess,
.likeno {
  display: none;
}

.revamps,
.collects,
.like,
.nolike {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.revampone,
.collectone,
.likeone,
.nolikeone {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #4dde7b;
  color: #4dde7b;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
}

/* 购买须知弹窗 */
.alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.alert-container {
  background-color: #fff;
  width: 80%;
  border-radius: 10px;
  overflow: hidden;

  .alert-title {
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #eee;
  }

  .alert-content {
    padding: 15px;
    min-height: 150px;
    font-size: 14px;
    line-height: 1.5;
  }

  .alert-close {
    padding: 10px;
    background-color: #ff8d1a;
    color: #fff;
    text-align: center;
    font-size: 16px;
    margin: 15px;
    border-radius: 5px;
  }
}
</style>